<div id="codiv">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="ntModalLabel">付款详情</h4>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <tbody>
                <tr>
                    <td>{:lang("payment_date")}</td>
                    <td colspan="3">{{topdata.happen_date}} </td>
                </tr>
                <tr>
                    <td>{:lang("payment_account")}</td>
                    <!--公司-->
                    <td>{{topdata.bankname}}/{{topdata.account_num}}</td>
                    <td>收款账号</td>
                    <!--客户-->
                    <td>{{topdata.companybankname}}/{{topdata.companyaccount_num}}</td>
                </tr>
                <tr>
                    <td>{:lang('edit')}</td>
                    <td>{{topdata.updatename}}</td>
                    <td>{:lang("supplier")}</td>
                    <td><a :href="'/admin/customer/companycheck?company_id='+topdata.co_id+'&tab=detail'" target="_blank">{{topdata.companyname}}</a></td>
                </tr>
                <tr>
                    <td>{:lang('amount')}</td>
                    <td colspan="3"><span class="green">{{formatUnit(topdata.amount,'CNY')}}</span> <span class="unit">CNY</span> </td>
                </tr>

                <tr>
                    <td>{:lang('remark')}</td>
                    <td colspan="3">{{topdata.remarks}}</td>
                </tr>
                <tr>
                    <td>{:lang("corresponding_contract")}</td>
                    <td colspan="3">
                        <div class="div-scroll" style="max-height:40vh">
                            <table class="table table-striped table-hover ntTable">
                                <thead>
                                <tr>
                                    <th>合同编号</th>
                                    <th>交货日期</th>
                                    <th>{:lang("payment_date")}</th>
                                    <th>应付金额</th>
                                    <th>{:lang("payment_amount")}</th>
                                    <th>差额</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in list">
                                    <td><a href="#" data-toggle="modal" data-target="#po_detailModal">{{formatUnit(item.po_id,'ID')}}</a></td>
                                    <td align="center">{{item.delivery_date}}</td>
                                    <td align="center">{{item.happen_date}}</td>
                                    <td class="text-right"><span class="red">{{formatUnit(item.zhifu,'CNY')}}</span> <span class="unit">CNY</span></td>
                                    <td class="text-right"><span class="green">{{formatUnit(item.amount,'CNY')}}</span> <span class="unit">CNY</span></td>
                                    <td class="text-right"><span class="blue">{{formatUnit(item.chahe,'CNY')}}</span> <span class="unit">CNY</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <input type="hidden" id="htid" value="{$htid}">
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('close')}</button>
</div>
</div>
<script>
    var table = new Vue({
        el: '#codiv',
        data: {
            topdata:{},
            list:[],
        },
        methods: {
            formatUnit:formatUnit,
            //付款流水数据获取
            getAllList(){
                $('.loding').hide()
                $.ajax({
                    url: "/admin/finance/cotwobuydetails",
                    type: 'post',
                    data: {
                        getdata: '',
                        id:$('#htid').val(),
                    },
                    dataType: "json",
                    success: (result) => {
                        $('.loding').hide()
                        this.list = result.data;
                        this.topdata = result.topdata;
                    }
                })
            }
        },
        mounted(){
            this.getAllList();
        }
    })

</script>
